<template>
	<view>
		<view style="position:fixed;width: 100%;padding-bottom：30rpx;z-index:10" class="bg-white">
			<div style="height:30rpx;background-color: #fff"></div>
			<view :style="{height: statusBarHeight + 'px'}" class="bg-white"></view>
			<Title :title="title" class="bg-white" />
		</view>
		<view style="height:130rpx"></view>
		<u-form
			:model="model1"
			ref="model1"
			class="ml-20 mr-20 formSty"
		>
			<view class="contentBg mt-15">
				<u-form-item :border-bottom="false"
					prop="repair"
					:required="true"
					:label="$t('申请原因')"
					label-position="top"
					class="titleSty"
					style="position: relative;"
				>
					<u-input v-model="model1.repair" type="textarea" :placeholder="$t('请填写申请原因')" :maxlength="1000" :border="true" height="240" :auto-height="true" />
						<p class="text-888 fz24" style="position: absolute; bottom: 30rpx; right: 20rpx;"> {{ remaining }} </p>
				</u-form-item>
			</view>
			<view class="contentBg mt-15">
				<u-form-item :border-bottom="false"
					prop="img"
					:required="true"
					:label="$t('上传图片') + $t('支持jpeg、jpg、png (大小7m内)')"
					label-position="top"
					class="titleSty"
				>
				<view class="uploads">
					<view class="img" v-for="(item, index) in model1.img" :key="index"
						@click="onPreview(item.fullurl)">
						<image :src="item.fullurl" mode="aspectFill" />
						<view class="delete" @click.stop="onDelete(index, 'img')">
							<view class="lien"></view>
						</view>
					</view>
					<view class="img" @click="onUpload({ type: 'image', size: 7, count: 3 })"
						v-if="model1.img.length < 3">
						<image src="/static/caigou/camera.png" />
					</view>
				</view>
				</u-form-item>
				<u-form-item :border-bottom="false"
					label-position="top"
					:label="$t('上传视频') + $t('支持mp4、rmvb、AVI (大小35m内)')"
					class="titleSty"
				>
					<view class="uploads">
						<view class="img zhan" v-for="(item, index) in model1.video" :key="index"
							@click="onPreviewVideo(item.fullurl)">
							<image src="@/static/play.png" mode="aspectFill" class=""></image>
							<view class="delete" @click.stop="onDelete(index, 'video')">
								<view class="lien"></view>
							</view>
						</view>
						<view class="img" @click="onUpload({ type: 'video', size: 35, count: 1 })"
							v-if="model1.video.length < 1">
							<image src="@/static/videox.png" mode="aspectFill" class="w-160 h-160" />
						</view>
					</view>
				</u-form-item>
			</view>
		</u-form>
		
		<!-- 播放视频 -->
		<uni-popup ref="popupVideo" type="center" background-color="#000" mask-background-color="#000" class="popvexxx">
		  <view class="wrapper-video">
		    <video :src="previewVideoUrl" :show-center-play-btn="true" object-fit="cover" play-btn-position="center"
		      :controls="true" :autoplay="true" class="video-main">
		    </video>
		  </view>
		</uni-popup>
		
		
		<view class="empty"></view>
		<view class="footer_btn4">
			<button class="btn_blue" :disabled="btnDis" @click="submit">{{$t('提交')}}</button>
		</view>
	</view>
</template>

<script>
	import Title from '../components/title.vue'
	import { toService } from '@/api/basic'
	import { uploadFile, chooseFile } from '@/assets/public.js';
	import {
		HTTP_REQUEST_URL,
		IMAGE_MAX_SIZE,
		IMAGE_MAX_COUNT,
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app';
	export default {
		components: {
			Title
		},
		data() {
			return {
				title: this.$t('申诉原因'),
				showKind: false,
				btnDis: false,
				current: '',
				currentUnit: 0,
				statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
				videoItem: {},
				typeList: [],
				fileList2: [],
				fileList1: [],
				fileList3: [],
				action: HTTP_REQUEST_URL + '/common/upload',
				imageMaxSize: IMAGE_MAX_SIZE,
				imageMaxCount: IMAGE_MAX_COUNT,
				max_count: 3,
				autoUpload: true,
				showUploadList: true,
				unitList: ['￥', '₽'],
				delBgColor: '#fa3534',
				delColor: '#ffffff',
				uploadText: this.$t('选择图片'),
				limitType: ['png', 'jpg', 'jpeg', 'webp', 'gif', 'image'],
				action: `${HTTP_REQUEST_URL}/common/upload`,
				kindList: [this.$t('代收付款'), this.$t('代办证件'), this.$t('签证'), this.$t('票务'), this.$t('现场监督'), this.$t('代理采购'), this.$t('医疗看病'), this.$t('代理销售')],
				typeName: '',
				city_name: '',
				priceImgList: [],
				videoList:[],
				imagesList: [],
				model1: {
					user_id: uni.getStorageSync("user_id"), // 用户id
					repair: '',
					img: [],
					video: [],
				},
				rules: {
					repair: [
						{ 
							required: true, 
							message: this.$t('请填写服务内容'), 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
						}
					],
					img: [
						{ 
							required: true, 
							message: this.$t('请上传图片'), 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
							type: 'array'
						}
					],
				},
				maxLength: 1000,
				previewVideoUrl: ''
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.model1.setRules(this.rules)
		},
		mounted() {
			// this.getCcateProfessional()
		},
		onLoad(options) {
			if (options.orderNo) {
				this.model1.on = options.orderNo
			}
		  },
		computed: {
		  remaining() {
		    return this.maxLength - this.model1.repair.length;
		  },
		},
		methods: {
			back() {
					// uni.navigateBack()
					this.cback()
				},
				getCcateProfessional() {
					getCcateProfessional().then(res => {
						this.typeList = res.data.data
					})
				},
				// 预览视频
				onPreviewVideo(url) {
				  this.previewVideoUrl = url;
				  this.$nextTick(() => {
				    this.$refs.popupVideo.open()
				  })
				},
				 // 删除图片
				 onDelete(index, arr) {
				   console.log(this.$t('删除照片了手机发了'), this.model1[arr])
				   this.model1[arr].splice(index, 1)
				   console.log(this.model1[arr], ' this[arr]')
				   this.$forceUpdate();
				 },
				 // 上传视频和图片
				 async onUpload({
				 	type,
				 	size,
				 	count
				 }, keyx) {
				 	let res = await uploadFile(await chooseFile({
				 		type,
				 		size,
				 		count,
				 	}))
				 	if (type == 'image') {
						this.model1.img.push(res);
				 	}
				 	if (type == 'video') {
				 		this.model1.video = [res];
				 	}
				 
				 },
				  submit() {
						const formData=JSON.parse(JSON.stringify(this.model1))
						formData.img=formData.img.map(item=>item.fullurl).join(",")
						formData.video=formData.video.map(item=>item.fullurl).join(",")
						console.log(formData)
					  this.$refs.model1.validate(valid => {
							if (valid) {
								this.btnDis= true
								uni.showLoading({
									title: this.$t('提交中')
								});
								toService({...formData}).then(res => {
									if (res.data.code == 200) {
										// uni.$u.toast(res.data.message)
										uni.$u.toast(res.data[this.plang('message')])
										uni.redirectTo({
											url: '/pages/tabbar/newUser/serviceOrder/index?order=1&statusBuy=4'
										})
									} else {
										// uni.$u.toast(res.data.message)
										uni.$u.toast(res.data[this.plang('message')])
									}
									uni.hideLoading()
								})
							} else {
								uni.$u.toast(this.$t('请检查是否有未上传内容'))
							}
						})
				  }
		}
	}
</script>

<style lang="scss">
	@import '@/assets/appScss.scss';
	@import './index.scss';
	page {
		background: #F6F7FB;
		height: auto !important;
	}
	uni-page {
		height: auto !important;
	}
	uni-page {
		height: auto !important;
	}
	.empty {
		width: 100%;
		height: 30rpx;
	}
	.titleSty {
		color: #262728;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 600;
		// padding-top: 34rpx;
		margin-left: 14rpx;
		position: relative;
	}
		.formSty {
			height: auto;
			padding-bottom: 200rpx;
			/deep/ .u-form-item__body {
				padding: 0;
			}
		}
		/deep/ .u-form {
				border: transparent !important;
				height: auto;
		}
		.smallInputSty {
			width: 194rpx;
			height: 80rpx;
			flex-shrink: 0;
			border-radius: 500rpx;
			border: 2rpx solid #D8D8D8;
			// background: #F7F7F7;
			color: #333;
			font-family: "PingFang SC";
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 28rpx;
		
			/* 116.667% */
			/deep/ .uni-input-input,
			.uni-input-placeholder {
				text-align: center;
			}
		}
		.unitSty {
				width: 150rpx;
				height: 80rpx;
				flex-shrink: 0;
				border-radius: 500rpx;
				border: 2rpx solid #D8D8D8;
				line-height: 80rpx;
				text-align: center;
				.commonSty {
					color: #333;
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-style: normal;
					font-weight: 400;
				}
				.acticeUnitSty {
					color: #278AFF;
				}
		}
		.badBtn {
			width: 100%;
			height: 80rpx;
			border-radius: 18rpx;
			// background: #F7F7F7;
			// border: 1rpx solid #dcdfe6;
			display: flex;
			justify-content: space-between;
		}
		/deep/ .u-hairline-border::after {
			border: 2rpx solid #D8D8D8 !important;
			// opacity: 1 !important;
			// border: transparent !important;
		}
	.contentBg {
		background-color: #fff;
		padding: 0 24rpx;
		// margin-left: 24rpx;
		// margin-right: 24rpx;
		border-radius: 18px;
		padding-bottom: 35rpx;
		/deep/ .u-form-item__body__right__message {
			margin-left: 0 !important;
		}
		/deep/ .u-icon__icon {
			font-size: 52rpx !important;
		}
		/deep/ .u-border-bottom{
			// border-bottom: none;
			// display: none;
			position: inherit;
		}
		/deep/ .u-add-wrap {
			// display: none !important;
			color: #D9D9D9;
			font-size: 20rpx;
		}
		/deep/ .u-add-tips {
			display: none !important;
		}
		/deep/ .u-input--border {
			border-radius: 18rpx !important;
		}
		/deep/ .u-form-item {
			line-height: 50rpx !important;
			color: #0e0e0e !important;
		}
	}
	.textareaSty {
		width: 100%;
		height: 226rpx !important;
		border-radius: 18rpx;
		border: 2rpx solid #D8D8D8;
		// background: #F7F7F7;
		margin-top: 24rpx;
	}
	.footer_btn4{
		position: fixed;
		left:0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		padding:30rpx 24rpx 60rpx;
		z-index: 20;
		.btn_blue{
			width: 97%;
			height: 94rpx;
			flex-shrink: 0;
			border-radius: 18rpx;
			// border: 2rpx solid rgba(3, 189, 130, 0.10);
			background-color: #007AFF;
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 600;
			text-align: center;
			line-height: 94rpx;
		}
		.btn_item{
			text-align: center;
			padding:0 10rpx;
			.name{
				color: #8C8C8C;
				font-size: 20rpx;
				line-height: 22rpx;
			}
		}
		.ico{
			width: 42rpx;
			height: 42rpx;
		}
	}
	.commonKindSty {
		width: 150rpx;
		height: 64rpx;
		background-color: #F7F7F7;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 64rpx;
		letter-spacing: 0px;
		color: #1D1D1D;
		text-align: center;
		border-radius: 500rpx;
	}
	.activeKindSty {
		background-color: #D7E9FF;
		border: 1px solid #278AFF;
		color: #278AFF;
	}
</style>
